<template>
    <!-- 查询表单 -->
    <div class="search-form">
        <el-card class="search-card">
            <div class="search-container">
                <div class="search-fields">
                    <div class="field-row">
                        <el-button type="success" class="!ml-0" plain @click="dialogFormVisible = true">新增</el-button>
                        <el-input v-model="page.TestTaskCode" placeholder="请输入检验任务编码" class="search-input" clearable
                            style="width: 150px;" />
                        <el-select v-model="page.TestTackclass" placeholder="请选择质检分类" style="width: 150px;">
                            <el-option label="首检" value="1" />
                            <el-option label="巡检" value="2" />
                            <el-option label="末检" value="3" />
                        </el-select>
                    </div>
                </div>
                <div class="search-actions">
                    <el-button type="primary" @click="list" class="search-btn">
                        <el-icon>
                            <Search />
                        </el-icon>
                        查询
                    </el-button>
                    <el-button type="info" @click="clearSearch" class="clear-btn">
                        <el-icon>
                            <Close />
                        </el-icon>
                        重置
                    </el-button>
                    <el-button type="warning" @click="toggleFullscreen" class="fullscreen-btn">
                        <el-icon>
                            <FullScreen />
                        </el-icon>
                        全屏
                    </el-button>
                </div>
            </div>
        </el-card>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="新增检验项目" width="600">
        <el-form :model="form" :rules="formRules" ref="formRef">
            <el-form-item label="质检分类" :label-width="formLabelWidth" prop="testTackclass">
                <el-select v-model="form.testTackclass" placeholder="请选择">
                    <el-option label="首检" value="1" />
                    <el-option label="巡检" value="2" />
                    <el-option label="末检" value="3" />
                </el-select>
            </el-form-item>
            <el-form-item label="检验方案" :label-width="formLabelWidth" prop="testProgramName">
                <el-input v-model="form.testProgramName" placeholder="请选择数据" readonly @click="showSchemeDialog = true"
                    style="cursor: pointer;" />
            </el-form-item>
            <el-form-item label="工单" :label-width="formLabelWidth" prop="type">
                <el-input v-model="form.type" placeholder="请选择数据" readonly @click="showOrderDialog = true"
                    style="cursor: pointer;" />
            </el-form-item>
            <el-form-item label="权限角色" :label-width="formLabelWidth" prop="testRoleId">
                <el-select v-model="form.testRoleId" placeholder="请选择">
                    <el-option v-for="t in tableDataType" :label="t.roleName" :value="t.id" />
                </el-select>
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addpro">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog v-model="dialogUpdateVisible" title="修改检验项目" width="600">
        <el-form :model="updateform" :rules="formRules" ref="updateFormRef">
            <el-form-item label="质检分类" :label-width="formLabelWidth" prop="testTackclass">
                <el-select v-model="updateform.testTackclass" placeholder="请选择">
                    <el-option label="首检" value="1" />
                    <el-option label="巡检" value="2" />
                    <el-option label="末检" value="3" />
                </el-select>
            </el-form-item>
            <el-form-item label="检验方案" :label-width="formLabelWidth" prop="testProgramName">
                <el-input v-model="updateform.testProgramName" placeholder="请选择数据" readonly
                    @click="showUpdateSchemeDialog = true" style="cursor: pointer;" />
            </el-form-item>
            <el-form-item label="工单" :label-width="formLabelWidth" prop="type">
                <el-input v-model="updateform.type" placeholder="请选择数据" readonly @click="showUpdateOrderDialog = true"
                    style="cursor: pointer;" />
            </el-form-item>
            <el-form-item label="权限角色" :label-width="formLabelWidth" prop="testRoleId">
                <el-select v-model="updateform.testRoleId" placeholder="请选择">
                    <el-option v-for="t in tableDataType" :label="t.roleName" :value="t.id" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogUpdateVisible = false">取消</el-button>
                <el-button type="primary" @click="update">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 检验方案选择弹窗 -->
    <el-dialog v-model="showSchemeDialog" title="请选择检验方案" width="60%" :close-on-click-modal="false">
        <el-table :data="schemeTableData" style="width: 100%" @selection-change="handleSchemeSelection">
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="id" label="编号" width="80" />
            <el-table-column prop="testSchemeName" label="检测方案名称" width="120" />
            <el-table-column prop="testKind" label="检测方案类型" width="120">
                <template #default="scope">
                    <el-tag v-if="scope.row.testKind == 1">全检</el-tag>
                    <el-tag v-if="scope.row.testKind == 2">抽检</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="testSchemeWay" label="方式" width="100">
                <template #default="scope">
                    <el-tag type="warning" v-if="scope.row.testSchemeWay == 1">百分比</el-tag>
                    <el-tag type="warning" v-if="scope.row.testSchemeWay == 2">间隔</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="testSchemeValue" label="值" width="90">
                <template #default="scope">
                    <span v-if="scope.row.testSchemeValue == 0"> </span>
                    <span v-if="scope.row.testSchemeValue > 0">{{ scope.row.testSchemeValue }}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="testSchemeDes" label="备注" width="180" />
            <el-table-column prop="addProp" label="创建人" width="100" />
            <el-table-column prop="addTime" label="创建时间" width="200">
                <template #default="scope">
                    {{ moment(scope.row.addTime).format("YYYY年MM月DD日 hh:mm:ss") }}
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showSchemeDialog = false">取消</el-button>
                <el-button type="primary" @click="confirmSchemeSelection">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 工单选择弹窗 -->
    <el-dialog v-model="showOrderDialog" title="请选择工单" width="45%" :close-on-click-modal="false">
        <el-table :data="orderTableData" style="width: 100%" @selection-change="handleOrderSelection">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="工单编号" width="180" />
            <el-table-column prop="code" label="工单编码" width="200" />
            <el-table-column prop="type" label="工单类型" width="200">
                <template #default="scope">
                    <el-tag v-if="scope.row.orderType == 1">正常</el-tag>
                    <el-tag v-if="scope.row.orderType == 2">委外</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showOrderDialog = false">取消</el-button>
                <el-button type="primary" @click="confirmOrderSelection">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 修改弹窗检验方案选择弹窗 -->
    <el-dialog v-model="showUpdateSchemeDialog" title="请选择检验方案" width="60%" :close-on-click-modal="false">
        <el-table :data="schemeTableData" style="width: 100%" @selection-change="handleUpdateSchemeSelection">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="方案编号" width="120" />
            <el-table-column prop="testSchemeName" label="检测方案名称" width="120" />
            <el-table-column prop="testKind" label="检测方案类型" width="120">
                <template #default="scope">
                    <el-tag v-if="scope.row.testKind == 1">全检</el-tag>
                    <el-tag v-if="scope.row.testKind == 2">抽检</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="testSchemeWay" label="方式" width="100">
                <template #default="scope">
                    <el-tag type="warning" v-if="scope.row.testSchemeWay == 1">百分比</el-tag>
                    <el-tag type="warning" v-if="scope.row.testSchemeWay == 2">间隔</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="testSchemeValue" label="值" width="90">
                <template #default="scope">
                    <span v-if="scope.row.testSchemeValue == 0"> </span>
                    <span v-if="scope.row.testSchemeValue > 0">{{ scope.row.testSchemeValue }}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="testSchemeDes" label="备注" width="180" />
            <el-table-column prop="addProp" label="创建人" width="100" />
            <el-table-column prop="addTime" label="创建时间" width="200">
                <template #default="scope">
                    {{ moment(scope.row.addTime).format("YYYY年MM月DD日 hh:mm:ss") }}
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showUpdateSchemeDialog = false">取消</el-button>
                <el-button type="primary" @click="confirmUpdateSchemeSelection">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 修改弹窗工单选择弹窗 -->
    <el-dialog v-model="showUpdateOrderDialog" title="请选择工单" width="45%" :close-on-click-modal="false">
        <el-table :data="orderTableData" style="width: 100%" @selection-change="handleUpdateOrderSelection">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="工单编号" width="180" />
            <el-table-column prop="code" label="工单编码" width="200" />
            <el-table-column prop="type" label="工单类型" width="200">
                <template #default="scope">
                    <el-tag v-if="scope.row.orderType == 1">正常</el-tag>
                    <el-tag v-if="scope.row.orderType == 2">委外</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showUpdateOrderDialog = false">取消</el-button>
                <el-button type="primary" @click="confirmUpdateOrderSelection">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="testTaskCode" label="检测项目编码" width="150" />
        <el-table-column prop="testTackclass" label="质检分类" width="100">
            <template #default="scope">
                <el-tag type="success" v-if="scope.row.testTackclass == 1">首检</el-tag>
                <el-tag type="warning" v-if="scope.row.testTackclass == 2">巡检</el-tag>
                <el-tag type="primary" v-if="scope.row.testTackclass == 3">末检</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="testProgramName" label="检验方案名称" width="120" />
        <el-table-column prop="testOrderType" label="工单" width="130" />
        <el-table-column prop="testRoleName" label="权限角色" width="100" />
        <el-table-column prop="addProp" label="创建人" width="100" />
        <el-table-column prop="addTime" label="创建时间" width="200">
            <template #default="scope">
                {{ moment(scope.row.addTime).format("YYYY年MM月DD日 hh:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column prop="updTime" label="修改时间" width="200">
            <template #default="scope">
                <span v-if="scope.row.updTime == null"> </span>
                <span v-if="scope.row.updTime != null">{{ moment(scope.row.updTime).format("YYYY年MM月DD日 hh:mm:ss")
                }}</span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
                    删除
                </el-button>
                <el-button link type="primary" size="small" @click="updateType(scope.row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 自定义分页组件 -->
    <div class="pagination-container">
        <div class="pagination-card">
            <div class="pagination-left">
                <span class="total-text">共{{ page.count }}条数据</span>
            </div>
            <div class="pagination-right">
                <span class="total-count">共{{ page.count }}条</span>
                <el-select v-model="page.Pagesize" @change="list()" class="page-size-select">
                    <el-option label="5条/页" :value="5" />
                    <el-option label="10条/页" :value="10" />
                    <el-option label="15条/页" :value="15" />
                    <el-option label="20条/页" :value="20" />
                </el-select>
                <div class="page-navigation">
                    <el-button :disabled="page.Pageindex <= 1" @click="page.Pageindex = page.Pageindex - 1; list()"
                        class="nav-btn">
                        上一页
                    </el-button>

                    <!-- 显示页码 -->
                    <template v-for="p in displayPages" :key="p">
                        <el-button class="page-btn" :class="{ active: p === page.Pageindex }" @click="goToPage(p)">{{ p
                            }}</el-button>
                    </template>

                    <!-- 省略号 -->
                    <span v-if="totalPages > 3 && page.Pageindex < totalPages - 2" class="ellipsis">...</span>

                    <!-- 最后一页 -->
                    <el-button v-if="totalPages > 3 && page.Pageindex < totalPages - 2" class="page-btn"
                        @click="goToPage(totalPages)">{{ totalPages }}</el-button>

                    <el-button :disabled="page.Pageindex >= Math.ceil(page.count / page.Pagesize)"
                        @click="page.Pageindex = page.Pageindex + 1; list()" class="nav-btn">
                        下一页
                    </el-button>
                </div>
                <div class="page-jumper">
                    <span>前往</span>
                    <el-input v-model="jumpPage" @keyup.enter="jumpToPage" class="jump-input" />
                    <span>页</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import Maxios from '@/Http/MesHelp';
import moment from 'moment';
import { onMounted, ref, watch, computed } from 'vue';
import { Search, Close, ArrowLeft, ArrowRight, FullScreen } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const dialogFormVisible = ref(false)
const dialogUpdateVisible = ref(false)
const showSchemeDialog = ref(false)
const showOrderDialog = ref(false)
const showUpdateSchemeDialog = ref(false)
const showUpdateOrderDialog = ref(false)
const isFullscreen = ref(false)
const formLabelWidth = '140px'
const jumpPage = ref(1)
const formRef = ref()
const updateFormRef = ref()

// 表单验证规则
const formRules = {
    testTackclass: [
        { required: true, message: '请选择质检分类', trigger: 'change' }
    ],
    testProgramName: [
        { required: true, message: '请选择检验方案', trigger: 'change' }
    ],
    type: [
        { required: true, message: '请选择工单', trigger: 'change' }
    ],
    testRoleId: [
        { required: true, message: '请选择权限角色', trigger: 'change' }
    ]
}

// 检验方案相关数据
const schemeTableData = ref<any[]>([])
const selectedSchemes = ref<any[]>([])
const selectedUpdateSchemes = ref<any[]>([])

// 工单相关数据
const orderTableData = ref<any[]>([])
const selectedOrders = ref<any[]>([])
const selectedUpdateOrders = ref<any[]>([])

const form = ref({
    "testTackclass": 0,
    "testProgram": 0,
    "testProgramName": "",
    "testOrder": 0,
    "type": "",
    "testRoleId": 0,
    "addProp": ""
})

//添加
const addpro = () => {
    if (!formRef.value) return
    formRef.value.validate((valid: boolean) => {
        if (!valid) return
        Maxios.post("/api/TestTask/AddTack", form.value).then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
                dialogFormVisible.value = false
                form.value.testTackclass = 0
                form.value.testProgram = 0
                form.value.testProgramName = ''
                form.value.testOrder = 0
                form.value.type = ''
                form.value.testRoleId = 0
                form.value.addProp = ''
                list()
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
    })
}

//删除
const handleClick = (id: any) => {
    ElMessageBox.confirm(
        '确定要逻辑删除本条数据吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        Maxios.post("/api/TestTask/DeleteTack", { id: id }).then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
                list()
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
    })


}

const tableData = ref([])
const tableDataunit = ref([
    {
        "unitName": "",
        "id": null,
    },
])
const tableDataType = ref([
    {
        "id": 0,
        "roleName": "",
        "roleCode": "",
        "description": "",
        "status": 0,
        "addTime": "",
        "remark": null,
        "permissions": null
    }
])

const page = ref({
    Pageindex: 1,
    Pagesize: 10,
    TestTaskCode: "",
    TestTackclass: null,
    TestTaskType: null,
    TaskResult: null,
    count: 0,
    page: 0
})

//项目显示
const list = () => {
    Maxios.get("/api/TestTask/ListTask", { params: page.value }).then(res => {
        tableData.value = res.data.data.list

        page.value.count = res.data.data.count
        page.value.page = res.data.data.page
    })
}

// 清空搜索条件
const clearSearch = () => {
    page.value.TestTaskCode = ""
    page.value.TestTackclass = null,
        page.value.TestTaskType = null,
        page.value.TaskResult = null,
        page.value.Pageindex = 1
    list()
}

// 全屏切换
const toggleFullscreen = () => {
    isFullscreen.value = !isFullscreen.value
    if (isFullscreen.value) {
        // 进入全屏
        const element = document.documentElement
        if (element.requestFullscreen) {
            element.requestFullscreen()
        } else if ((element as any).webkitRequestFullscreen) {
            (element as any).webkitRequestFullscreen()
        } else if ((element as any).msRequestFullscreen) {
            (element as any).msRequestFullscreen()
        }
    } else {
        // 退出全屏
        if (document.exitFullscreen) {
            document.exitFullscreen()
        } else if ((document as any).webkitExitFullscreen) {
            (document as any).webkitExitFullscreen()
        } else if ((document as any).msExitFullscreen) {
            (document as any).msExitFullscreen()
        }
    }
}

// 跳转到指定页面
const jumpToPage = () => {
    const totalPages = Math.ceil(page.value.count / page.value.Pagesize)
    if (jumpPage.value >= 1 && jumpPage.value <= totalPages) {
        page.value.Pageindex = jumpPage.value
        list()
    } else {
        ElMessage.warning(`请输入1到${totalPages}之间的页码`)
    }
}

// 计算总页数与展示页码
const totalPages = computed(() => Math.max(1, Math.ceil(page.value.count / page.value.Pagesize)))

const displayPages = computed(() => {
    const total = totalPages.value
    const current = page.value.Pageindex

    if (total <= 3) {
        // 总页数小于等于3，显示所有页
        return Array.from({ length: total }, (_, i) => i + 1)
    }

    if (current <= 3) {
        // 当前页在前3页，显示前3页
        return [1, 2, 3]
    }

    if (current >= total - 2) {
        // 当前页在后3页，显示后3页
        return [total - 2, total - 1, total]
    }

    // 当前页在中间，显示当前页前后各1页
    return [current - 1, current, current + 1]
})

const goToPage = (p: number) => {
    if (p < 1 || p > totalPages.value) return
    page.value.Pageindex = p
    list()
}

const updateform = ref({
    "id": 0,
    "testTackclass": 0,
    "testProgram": 0,
    "testProgramName": "",
    "testOrder": 0,
    "type": "",
    "testRoleId": 0
})

const updateType = (row: any) => {
    updateform.value.id = row.id
    updateform.value.testTackclass = row.testTackclass
    updateform.value.testProgram = row.testProgram
    updateform.value.testProgramName = row.testProgramName
    updateform.value.testOrder = row.testOrder
    updateform.value.type = row.testOrderType || row.type
    updateform.value.testRoleId = row.testRoleId
    dialogUpdateVisible.value = true
}

const update = () => {
    if (!updateFormRef.value) return
    updateFormRef.value.validate((valid: boolean) => {
        if (!valid) return
        Maxios.post("/api/TestTask/UpdateTack", updateform.value).then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
                dialogUpdateVisible.value = false
                list()
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
    })
}


//显示角色
const listtype = () => {
    Maxios.get("/api/User/GetAllRoles").then(res => {
        tableDataType.value = res.data.data
    })
}

//显示单位
const listunit = () => {
    Maxios.post("/api/Band/UnitGet").then(res => {
        tableDataunit.value = res.data.data
    })
}

// 获取检验方案数据
const loadSchemeData = () => {
    const pageScheme = {
        Pageindex: 1,
        Pagesize: 100,
        TestSchemeName: "",
        TestKind: null,
    }
    Maxios.get("/api/TestScheme/ListScheme", { params: pageScheme }).then(res => {
        schemeTableData.value = res.data.data.list
    })
}
const pageOrder = ref({
    Pageindex: 1,
    Pagesize: 100,
})
// 获取工单数据
const loadOrderData = () => {
    Maxios.get("/api/Process/GetProduct", { params: pageOrder.value }).then(res => {
        orderTableData.value = res.data.data.list
    })

}

// 处理检验方案选择变化
const handleSchemeSelection = (selection: any[]) => {
    selectedSchemes.value = selection
}

// 确认检验方案选择
const confirmSchemeSelection = () => {
    if (selectedSchemes.value.length === 0) {
        ElMessage.warning('请选择检验方案')
        return
    }

    if (selectedSchemes.value.length > 1) {
        ElMessage.warning('只能选择一个检验方案')
        return
    }

    const scheme = selectedSchemes.value[0]

    // 反填数据到表单
    form.value.testProgram = scheme.id
    form.value.testProgramName = scheme.testSchemeName

    // 打印调试信息
    console.log('选择的检验方案:', scheme)
    console.log('反填后的表单数据:', form.value)

    showSchemeDialog.value = false
    ElMessage.success('检验方案选择成功')
}

// 处理工单选择变化
const handleOrderSelection = (selection: any[]) => {
    selectedOrders.value = selection
}

// 确认工单选择
const confirmOrderSelection = () => {
    if (selectedOrders.value.length === 0) {
        ElMessage.warning('请选择工单')
        return
    }

    if (selectedOrders.value.length > 1) {
        ElMessage.warning('只能选择一个工单')
        return
    }

    const order = selectedOrders.value[0]

    // 反填数据到表单
    form.value.testOrder = order.id
    form.value.type = order.type || order.orderCode

    // 打印调试信息
    console.log('选择的工单:', order)
    console.log('反填后的表单数据:', form.value)

    showOrderDialog.value = false
    ElMessage.success('工单选择成功')
}

// 处理修改弹窗的检验方案选择变化
const handleUpdateSchemeSelection = (selection: any[]) => {
    selectedUpdateSchemes.value = selection
}

// 确认修改弹窗的检验方案选择
const confirmUpdateSchemeSelection = () => {
    if (selectedUpdateSchemes.value.length === 0) {
        ElMessage.warning('请选择检验方案')
        return
    }

    if (selectedUpdateSchemes.value.length > 1) {
        ElMessage.warning('只能选择一个检验方案')
        return
    }

    const scheme = selectedUpdateSchemes.value[0]

    // 反填数据到修改表单
    updateform.value.testProgram = scheme.id
    updateform.value.testProgramName = scheme.testSchemeName

    // 打印调试信息
    console.log('修改弹窗选择的检验方案:', scheme)
    console.log('反填后的修改表单数据:', updateform.value)

    showUpdateSchemeDialog.value = false
    ElMessage.success('检验方案选择成功')
}

// 处理修改弹窗的工单选择变化
const handleUpdateOrderSelection = (selection: any[]) => {
    selectedUpdateOrders.value = selection
}

// 确认修改弹窗的工单选择
const confirmUpdateOrderSelection = () => {
    if (selectedUpdateOrders.value.length === 0) {
        ElMessage.warning('请选择工单')
        return
    }

    if (selectedUpdateOrders.value.length > 1) {
        ElMessage.warning('只能选择一个工单')
        return
    }

    const order = selectedUpdateOrders.value[0]

    // 反填数据到修改表单
    updateform.value.testOrder = order.id
    updateform.value.type = order.type || order.code

    // 打印调试信息
    console.log('修改弹窗选择的工单:', order)
    console.log('反填后的修改表单数据:', updateform.value)

    showUpdateOrderDialog.value = false
    ElMessage.success('工单选择成功')
}

// 监听弹窗打开事件
watch(showSchemeDialog, (newVal) => {
    if (newVal) {
        // 清空之前的选择状态
        selectedSchemes.value = []
        loadSchemeData()
    }
})

watch(showOrderDialog, (newVal) => {
    if (newVal) {
        // 清空之前的选择状态
        selectedOrders.value = []
        loadOrderData()
    }
})

// 监听修改弹窗的检验方案选择弹窗
watch(showUpdateSchemeDialog, (newVal) => {
    if (newVal) {
        // 清空之前的选择状态
        selectedUpdateSchemes.value = []
        loadSchemeData()
    }
})

// 监听修改弹窗的工单选择弹窗
watch(showUpdateOrderDialog, (newVal) => {
    if (newVal) {
        // 清空之前的选择状态
        selectedUpdateOrders.value = []
        loadOrderData()
    }
})

onMounted(() => {
    list()
    listtype()
    listunit()
})
</script>

<style scoped>
.search-form {
    margin-bottom: 20px;
}

.search-card {
    background: #f5f5f5;
    border-radius: 8px;
}

.search-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}

.search-fields {
    flex: 1;
}

.field-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.search-input {
    width: 200px;
}

.search-input :deep(.el-input__wrapper) {
    border-radius: 6px;
    background: white;
}

.search-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.clear-btn {
    background: #f0f0f0;
    border: 1px solid #d9d9d9;
    color: #666;
    border-radius: 6px;
}

.clear-btn:hover {
    background: #e6e6e6;
    border-color: #bfbfbf;
}

.fullscreen-btn {
    background: #fdf6ec;
    border: 1px solid #f5dab1;
    color: #e6a23c;
    border-radius: 6px;
}

.fullscreen-btn:hover {
    background: #faecd8;
    border-color: #eebe77;
    color: #d48806;
}

.search-btn {
    border-radius: 6px;
}

.search-btn:hover {
    opacity: 0.8;
}

/* 分页组件样式 */
.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
    overflow-x: auto;
}

.pagination-card {
    background: white;
    border-radius: 8px;
    padding: 16px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    min-width: 600px;
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.total-text {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

.pagination-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.total-count {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
}

.page-size-select {
    width: 100px;
    flex-shrink: 0;
}

.page-size-select :deep(.el-input__wrapper) {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
}

.page-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.nav-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    border: none;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-btn:hover:not(:disabled) {
    color: #409eff;
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.current-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #409eff;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
}

.page-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    border: none;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: #606266;
}

.page-btn:hover {
    color: #409eff;
}

.page-btn.active {
    background: #409eff;
    color: white;
}

.ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #c0c4cc;
    font-size: 14px;
    flex-shrink: 0;
}

.page-jumper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
}

.jump-input {
    width: 60px;
}

.jump-input :deep(.el-input__wrapper) {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    text-align: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .pagination-card {
        padding: 12px 16px;
        gap: 12px;
    }

    .pagination-right {
        gap: 8px;
    }

    .total-count {
        display: none;
    }
}

@media (max-width: 768px) {
    .pagination-container {
        justify-content: flex-start;
        padding: 0 16px;
    }

    .pagination-card {
        min-width: 100%;
        padding: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pagination-left {
        justify-content: center;
    }

    .pagination-right {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .page-size-select {
        width: 80px;
    }

    .jump-input {
        width: 50px;
    }
}

@media (max-width: 480px) {
    .pagination-right {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .page-navigation {
        order: 1;
    }

    .page-size-select {
        order: 2;
    }

    .page-jumper {
        order: 3;
    }
}

/* 只读输入框样式 */
:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    cursor: pointer;
}

:deep(.el-input.is-disabled .el-input__inner) {
    color: #606266;
    cursor: pointer;
}

/* 弹窗表格样式 */
:deep(.el-dialog__body) {
    padding: 20px;
}

:deep(.el-table__header-wrapper) {
    background: #f5f7fa;
}

:deep(.el-table th) {
    background: #f5f7fa;
    color: #606266;
    font-weight: 500;
}

:deep(.el-table__row:hover) {
    background: #f5f7fa;
}
</style>
